<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script>
        function $(elementId){
            return document.getElementById(elementId);
        }
        window.onload = function (){
            search();
        }

        async function search(){
            await axios.get("/search/findAll").then(e => {
                var result = e.data;
                var str = "";
                for (var i=0;i<result.length;i++){
                    var obj = result[i];
                    str += `<option value="${obj.id}">${obj.name}</option>`;
                }
                $('province').innerHTML = str;
            })
            findCity()
        }
        function findCity(){
            axios.get("/search/findById",{
                params:{
                    id:$("province").value
                }
            }).then(e => {
                var provinceObj = e.data;
                console.log(provinceObj);
                var str = "";
                for (var i=0;i<provinceObj.list.length;i++){
                    var city = provinceObj.list[i];
                    str += `<option>${city.name}</option>`;
                }
                $('city').innerHTML = str;
            })
        }


    </script>
</head>
<body>
    <select id="province" onchange="findCity()">
        <option selected>省份</option>
    </select>
    <select id="city">
        <option selected>城市</option>
    </select>
</body>
</html>